<template>
  <el-main class="main-content">
    <el-row :gutter="16" style="margin: 0; padding: 0">
      <el-col :span="24">
        <el-card class="content-card" header="IADM 钻完井作业智能分析及动态管理系统">
          <template #header>
            <div style="display: flex; justify-content: space-between; align-items: center">
              <div>IADM 钻完井作业智能分析及动态管理系统</div>
              <div class="card-extra" @click="getCurrentView">自定义</div>
            </div>
          </template>
          <component :is="currentView" />
        </el-card>
      </el-col>
    </el-row>
    <el-dialog v-model="dialogVisible" title="选择模块" width="500">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in moduleOptions" :key="index">
          <div class="module-item" :class="{ 'is-active': selectedModule === item.component }" @click="selectModule(item)">
            <el-icon><component :is="item.icon" /></el-icon>
            <span>{{ item.name }}</span>
          </div>
        </el-col>
      </el-row>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSelection">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </el-main>
</template>

<script lang="ts" setup>
  import { ref, markRaw } from 'vue'
  import { DataLine, Histogram } from '@element-plus/icons-vue'
  import DynamicFactor from './MainContent/DynamicFactor.vue'
  import TubeStatsCharts from '@/components/MainContent/TubeStatsCharts.vue'

  interface ModuleOption {
    name: string
    icon: string
    component: any
  }

  const componentViewInfo = {
    dynamicFactor: markRaw(DynamicFactor),
    tubeStatsCharts: markRaw(TubeStatsCharts),
  }

  const moduleOptions: ModuleOption[] = [
    { name: '动态因素', icon: 'DataLine', component: 'dynamicFactor' },
    { name: '管柱统计', icon: 'Histogram', component: 'tubeStatsCharts' },
  ]

  const currentView = ref(componentViewInfo[localStorage.getItem('mainContentView') as keyof typeof componentViewInfo] || componentViewInfo.tubeStatsCharts)
  const dialogVisible = ref(false)
  const selectedModule = ref<keyof typeof componentViewInfo | ''>((localStorage.getItem('mainContentView') as keyof typeof componentViewInfo) || 'tubeStatsCharts')

  const getCurrentView = () => {
    dialogVisible.value = true
  }

  const selectModule = (module: ModuleOption) => {
    selectedModule.value = module.component
  }

  const confirmSelection = () => {
    if (selectedModule.value && componentViewInfo[selectedModule.value]) {
      currentView.value = componentViewInfo[selectedModule.value]
    }
    dialogVisible.value = false
    localStorage.setItem('mainContentView', selectedModule.value)
  }
</script>

<style lang="scss" scoped>
  .main-content {
    padding: 10px;
    border-radius: 8px;

    .content-card {
      margin-bottom: 12px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      .el-card__header {
        font-weight: bold;
        font-size: 16px;
        background: #f0f6ff;
        border-radius: 8px 8px 0 0;
        .card-extra {
          text-align: right;
          color: #409eff;
          cursor: pointer;
          font-size: 13px;
        }
      }
    }
  }

  .module-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80px;
    background-color: #f5f7fa;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 16px;
    border: 2px solid transparent;

    &:hover {
      background-color: #ecf5ff;
      color: #409eff;
    }

    &.is-active {
      background-color: #ecf5ff;
      color: #409eff;
      border-color: #409eff;
      font-weight: 500;
    }

    .el-icon {
      font-size: 24px;
      margin-bottom: 8px;
    }

    span {
      font-size: 14px;
    }
  }
</style>
